<!DOCTYPE html>


<head>
	<meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <script src="./js/vue.js"></script>
	<title>购物车</title>
	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
		}

		body {
			width: 80%;
			margin: 0 auto;
		}

		.goods {
			border: 1px solid red;
		}

		.goods .goods_one1 {
			height: 40px;
			line-height: 40px;
			/* display: inline-block; */
			border: 1px solid #000000;
		}

		.goods .goods_one1 div {
			display: inline-block;
			/* border: 1px solid blue; */
		}

		.goods .goods_two1 table {
			margin-top: 10px;
			text-align: center;
			width: 100%;
		}

		.goods .goods_two1 table td {
			padding: 5px 5px;
		}
	</style>
</head>

<body>

	<div class="goods clear">
		<div class="goods_one1">
			<div><span>品牌名称</span></div>
			<div>
				<input type="text">
				<input type="button" value="添加">
			</div>
		</div>
		<div class="goods_one1">
			<div><span>品牌名称</span></div>
			<div>
				<input id="nav_txt" type="text">
				<input id="nav" type="button" value="搜索">
			</div>
		</div>
		<div class="goods_two1">
			<table border="1" cellspacing="0" cellpadding="0">
				<tr>
					<td>编号</td>
					<td>商品名称</td>
					<td>价格</td>
					<td>数量</td>
					<td>添加时间</td>
					<td>操作</td>
				</tr>
				<tr>
					<td>1</td>
					<td><span class="fruits">水果</span></td>
					<td><span class="price1" class="price">50</span></td>
					<td>
						<input class="btn1" type="button" value="-">
						<span class="num1">10</span>
						<input class="btn2" type="button" value="+">
					</td>
					<td>2022/1/3</td>
					<td><a class="del" href="#">删除</a></td>
				</tr>
				<tr>
					<td>2</td>
					<td><span class="fruits">蔬菜</span></td>
					<td><span class="price1" class="price">40</span></td>
					<td>
						<input class="btn1" type="button" value="-">
						<span class="num1">10</span>
						<input class="btn2" type="button" value="+">
					</td>
					<td>2022/1/3</td>
					<td><a class="del" href="#">删除</a></td>
				</tr>
				<tr>
					<td>3</td>
					<td><span class="fruits">肉类</span></td>
					<td><span class="price1" class="price">60</span></td>
					<td>
						<input class="btn1" type="button" value="-">
						<span class="num1">10</span>
						<input class="btn2" type="button" value="+">
					</td>
					<td>2022/1/3</td>
					<td><a class="del" href="#">删除</a></td>
				</tr>
			</table>
			<div>价格总价是：<span id="num2">0</span></div>
		</div>
	</div>

</body>

</html>
<script type="text/javascript">
	nav.onclick = function () {
		var a = document.getElementsByClassName("fruits");
		for (var i = a.length - 1; i >= 0; i--) {
			if (a[i].innerText == nav_txt.value) {
				console.log(a[i].innerText);
			} else {
				a[i].parentNode.parentNode.innerHTML = null;
			}
		}
	}

	var jian = document.getElementsByClassName("btn1");
	var jia = document.getElementsByClassName("btn2");
	var shuliang = document.getElementsByClassName("num1");
	var price = document.getElementsByClassName("price1");
	var shanchu = document.getElementsByClassName("del");
	var sum = 0;
	for (var i = 0; i < jian.length; i++) {
		(function (i) {
			jian[i].onclick = function () {
				shuliang[i].innerText = Number(shuliang[i].innerText) - 1;
				sum = Number(shuliang[i].innerText) * Number(price[i].innerText)
				num2.innerText = Number(num2.innerText) + sum;
			}
		})(i);
		(function (i) {
			jia[i].onclick = function () {
				shuliang[i].innerText = Number(shuliang[i].innerText) + 1;
				sum = Number(shuliang[i].innerText) * Number(price[i].innerText)
				num2.innerText = Number(num2.innerText) + sum;
			}
		})(i);

	}
	for (var i = shanchu.length - 1; i >= 0; i--) {
		(function (i) {
			shanchu[i].onclick = function () {
				shanchu[i].parentNode.parentNode.innerText = null;
				console.log(i);
				i--;
				// console.log(shanchu[i].parentNode.parentNode.innerHTML)
			}
		})(i);
	}

	// btn1.onclick = function(){
	// 	num1.innerText = Number(num1.innerText)-1;
	// 	num2.innerText = Number(num1.innerText)*Number(price1.innerText)
	// }
	// btn2.onclick = function(){
	// 	num1.innerText = Number(num1.innerText)+1;
	// 	num2.innerText = Number(num1.innerText)*Number(price1.innerText)
	// }
</script>
</html>